<template>
    <div>
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in pics" :key="item.id">
                <el-image :src="item.url"></el-image>
            </el-carousel-item>
        </el-carousel>
        <el-card style="height: 800px">
            <h1>热门商品</h1>
            <div style="text-align: center">
                <el-row class="good_container">
                    <el-col
                        :span="4"
                        v-for="good in goods"
                        :key="good.id"
                        class="goodbox"
                    >
                        <el-card>
                            <el-image
                                style="height: 130px"
                                v-if="good.img"
                                :src="good.img"
                                lazy
                            ></el-image>
                            <el-image v-else style="height: 130px">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <el-descriptions :column="1">
                                <el-descriptions-item label="名称">{{
                                    good.name
                                }}</el-descriptions-item>
                                <el-descriptions-item label="价格">{{
                                    good.price
                                }}</el-descriptions-item>
                            </el-descriptions>
                            <el-row>
                                <el-col :span="12">
                                    <el-button
                                        size="mini"
                                        @click="showdetail(good.id)"
                                        >查看详情</el-button
                                    >
                                </el-col>
                                <el-col :span="12">
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        @click="buyit(good.id)"
                                        >加购</el-button
                                    >
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <el-link @click="tomore()">查看更多</el-link>
        </el-card>
        <!-- 详细列表 -->
        <el-dialog title="提示" :visible.sync="detailVisible" width="60%">
            <span>{{ detailobj.name }}</span>
            <el-descriptions title="详细信息" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        商品名
                    </template>
                    {{ detailobj.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-home"></i>
                        商家名
                    </template>
                    {{ detailobj.busname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-flag"></i>
                        分类
                    </template>
                    {{ detailobj.catename }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        状态
                    </template>
                    <el-tag
                        v-if="detailobj.ishot == '1'"
                        size="small"
                        type="danger"
                        >热门</el-tag
                    >
                    <el-tag v-else size="small">普通</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-finance"></i>
                        当前价格
                    </template>
                    {{ detailobj.price }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-finance"></i>
                        详细信息
                    </template>
                    {{ detailobj.detail }}
                </el-descriptions-item>
            </el-descriptions>
            <el-image
                v-if="detailobj.img"
                style="width: 100%"
                :src="detailobj.img"
                lazy
            ></el-image>
            <el-image v-else style="height: 130px">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
        </el-dialog>
    </div>
</template>


<script>
import background1 from '../assets/imgs/1.jpg';
import background2 from '../assets/imgs/2.jpg';
import background3 from '../assets/imgs/3.jpg';
import background4 from '../assets/imgs/4.jpg';
import background5 from '../assets/imgs/5.jpg';
export default {
    data() {
        return {
            islogin: '0',
            detailVisible: false,
            detailobj: [],
            goods: [],
            pics: [
                {
                    url: background1,
                    id: 1,
                },
                {
                    url: background2,
                    id: 2,
                },
                {
                    url: background3,
                    id: 3,
                },
                {
                    url: background4,
                    id: 4,
                },
                {
                    url: background5,
                    id: 5,
                },
            ],
        };
    },
    created() {
        this.getgoods();
    },
    methods: {
        tomore() {
            this.$router.push('/catepart');
            window.sessionStorage.setItem('activepath', '4');
        },
        getgoods() {
            this.$http
                .get('getgoodsinfirst')
                .then((res) => {
                    if (res.data.code !== 200) {
                        this.$Message.success('获取数据失败！');
                        return;
                    }
                    this.goods = res.data.data;
                })
                .catch((err) => {
                    this.$message.error('系统错误！' + err);
                });
        },
        showdetail(id) {
            this.$http
                .get('getgoodsbyid', { params: { id: id } })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.detailobj = res.data.data;
                        this.detailVisible = true;
                    } else {
                        this.$Message.error('查询信息信息失败！');
                    }
                })
                .catch((err) => {
                    this.$Message.error('系统错误' + err);
                });
        },
        buyit(id) {
            if (this.$cookie.get('login') !== '1') {
                this.$Message.error('您好！请先登录！');
                return;
            }
            this.$confirm('此操作将加购该商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let params = new URLSearchParams();
                    params.append(
                        'token',
                        window.sessionStorage.getItem('usertoken')
                    );
                    params.append(
                        'userid',
                        window.sessionStorage.getItem('userid')
                    );
                    params.append('goodid', id);
                    this.$http
                        .post('/addcart', params)
                        .then((res) => {
                            if (res.data.code == 200) {
                                this.$Message.success(res.data.msg);
                            } else {
                                this.$Message.error(res.data.msg);
                            }
                        })
                        .catch((err) => {
                            this.$Message.error('系统错误' + err);
                        });
                })
                .catch(() => {
                    this.$Message({
                        type: 'info',
                        message: '已取消加购',
                    });
                });
        },
    },
};
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.goodbox {
    margin: 20px;
    display: inline;
}
.good_container {
    display: inline-block;
}
</style>